<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>转账 TOTORO BANK</title>
    <link rel="stylesheet" type="text/css" href="css/nav2.css">
    <link href="css/transferaccounts-style.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="js/jquery.min.js"></script>
    <!-- //font-awesome-icons -->
    <link href="//fonts.googleapis.com/css?family=Mirza:400,500,600,700&amp;subset=arabic,latin-ext" rel="stylesheet">
	
	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript">
		$(function() {
			localStorage.setItem('the_cookie', 'value');
		});
		function f1() {
			var cardnum = document.getElementById("cardnum").value;
			var name = document.getElementById("name").value;
			var money = document.getElementById("money").value;
			localStorage.setItem("cardnum", cardnum);
			localStorage.setItem("name", name);
			localStorage.setItem("money", money);
			window.location.href = "pay.html";
		}
	</script>
	
</head>
<body>
<nav>
    <div class="menubar">
        <a href="index.html" class="home"><img src="images/logo.png" width="200" height="70"></a>
        <div class="icons">
            <div class="secondary-icons">
                <i class="icon-second"><a href="personalcenter.html"><img src="images/map/svg/icon-171.svg"></a></i>
                <i class="icon-second"><a href="helpandsupport.html"><img src="images/map/svg/icon-198.svg"></a></i>
            </div>
            <i class="icon-menu"><span></span></i>
        </div>
    </div>
    <ul class="menu">
        <li class="menu-link">
            <a href="index.html" class="text-item">首 页</a>
        </li>
        <li class="menu-link sub">
            <a href="#0" class="text-item">资金来往<span class="icon"></span></a>
        </li>
        <li class="menu-link sub">
            <a href="personalcenter.html" class="text-item">个人中心<span class="icon"></span></a>
        </li>
        <li class="menu-link">
            <a href="helpandsupport.html" class="text-item">帮助与服务</a>
        </li>
    </ul>
</nav>
<!--页面内容-->
<div class="main">
    <h1>Transfer Accounts</h1>
    <div class="w3_agile_main_grids">
        <div class="w3layouts_main_grid_left">
            <div class="agileinfo_main_grid_left_grid">
                <h3>提示:请注意资金安全!</h3>
                <ul>
                    <li>Warning<span>不要给陌生人转账汇款</span><span>Don't transfer money to strangers</span></li>
                    <li>提示</li>
                </ul>
                <ul>
                    <li>Tips<span>请核实对方身份</span><span>Please verify the identity of the other party</span></li>
                    <li>警告</li>
                </ul>
                <ul>
                    <li>+86-28-64888000<span>如有需要请联系我们</span><span>Please contact us if necessary</span></li>
                    <li>TEL</li>
                </ul>
                </ul>
            </div>
        </div>
        <div class="agileits_main_grid_right">
            <div class="wthree_payment_grid">
                <div class="resp-tabs-container">
                    <div class="agileits_w3layouts_tab1">
                        <!-- <form action="f1()" method="get" class="creditly-card-form agileinfo_form"> -->
                            <section class="creditly-wrapper wthree, w3_agileits_wrapper">
                                <div class="credit-card-wrapper">
                                    <div class="first-row form-group">
                                        <div class="controls">
                                            <label class="control-label">收款人银行卡号</label>
                                            <input id="cardnum" class="billing-address-name form-control" type="text"
                                                   placeholder="Payee's bank card number" minlength="18" maxlength="18" required="required">
                                        </div>
                                        <div class="w3_agileits_card_number_grids">
                                            <div class="w3_agileits_card_number_grid_left">
                                                <div class="controls">
                                                    <label class="control-label">收款人姓名</label>
                                                    <input id="name" class="number credit-card-number form-control" type="text"
                                                           placeholder="Name of payee" required="required">
                                                </div>
                                            </div>
                                          <!--  <div class="w3_agileits_card_number_grid_right">
                                                <div class="controls">
                                                    <label class="control-label">银行</label>
                                                    <input class="security-code form-control" type="text"
                                                           name="security-code" list="banklist" placeholder="Select bank">
                                                    <datalist id="banklist">
                                                        <option>TOTORO BANK</option>
                                                        <option>中国银行</option>
                                                        <option>中国民生银行</option>
                                                        <option>重庆银行</option>
                                                        <option>中国工商银行</option>
                                                        <option>中国农业银行</option>
                                                        <option>中信银行</option>
                                                        <option>中国交通银行</option>
                                                        <option>中国建设银行</option>
                                                        <option>花旗银行</option>
                                                        <option>兴业银行</option>
                                                        <option>渣打银行</option>
                                                    </datalist>
                                                </div>
                                            </div> -->
                                            <div class="clear"></div>
                                        </div>
                                        <div class="controls">
                                            <label class="control-label">金额</label>
                                            <input id="money" class="expiration-month-and-year form-control" type="text"
                                                   placeholder="amount of money" required="required">
                                        </div>
                                    </div>
                                    <input onclick="f1()" type="submit">
                                        <span> 发 起 转 账 <i class="fa fa-long-arrow-right" aria-hidden="true"></i></span>
                                    </input>
                                </div>
                            </section>
                        <!-- </form> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<script src="js/jquery.js"/>
<script>
    //银行卡号自动间隔
    !function () {
        $('#cardnum').on('keyup mouseout input', function (e) {  //当前输入框
            if ((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) {  //判断输入KEY范围
                var $this = $(this),
                    v = $this.val();
                /\S{5}/.test(v) && $this.val(v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")); //利用正则处理
            }
        });
    }();
</script>
<script src="js/nav2.js"></script>
</body>
</html>